<template>
  <van-dropdown-item ref="close">
    <template #title>
      <span :class="{ filterRight: isglShow }" class="isSizeFont">{{
        title
      }}</span>
    </template>
    <template #icon>
      <i class="iconfont icon-arrow"></i>
    </template>
    <van-picker
      ref="picker"
      @confirm="confirmBtn"
      show-toolbar
      toolbar-position="bottom"
      :columns="areaList"
    >
      <template #confirm>
        <van-button type="primary" class="confirm-btn">确定</van-button>
      </template>
      <template #cancel>
        <span @click="colseBtn" class="close-btn">取消</span>
      </template>
    </van-picker>
  </van-dropdown-item>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    title: {
      type: String,
      required: true
    },
    areaList: {
      type: Array,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 高亮效果是否一直显示
      isglShow: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    colseBtn() {
      this.isglShow = false
      this.$refs.close.toggle()
    },
    // 点击确认按钮发起请求
    confirmBtn(value) {
      this.isglShow = true
      const refList = this.$refs.picker.getValues()
      if (this.title === '区域') {
        if (value[0] === '区域') {
          if (refList[2].value !== 'null') {
            this.$emit('filter', refList[2].value, this.name)
          } else if (refList[1].value !== 'null') {
            this.$emit('filter', refList[1].value, this.name)
          } else {
            this.$emit('filter', '', this.name)
          }
        } else if (value[0] === '地铁') {
          const name = 'subway'
          if (refList[2].value !== 'null') {
            this.$emit('filter', refList[2].value, name)
          } else if (refList[1].value !== 'null') {
            this.$emit('filter', refList[1].value, name)
          } else {
            this.$emit('filter', '', name)
          }
        }
      } else if (this.title === '方式') {
        this.$emit('filter', value.value, this.name)
      } else if (this.title === '租金') {
        this.$emit('filter', value.value, this.name)
      }
      this.$refs.close.toggle()
    }
  }
}
</script>

<style scoped lang="less">
.isSizeFont {
  font-size: 36px;
}
:deep(.van-dropdown-menu__bar) {
  height: 80px;
}
:deep(.van-picker__toolbar) {
  .van-picker__confirm {
    width: 65% !important;
    padding: 0;
    border-radius: 0;
    background-color: #21b97a;
    .confirm-btn {
      width: 100%;
      background-color: inherit;
      font-size: 36px;
    }
  }
  .concel-btn {
    background-color: #fff;
    color: #21b97a;
  }
  .van-picker__cancel {
    flex: 1;
    border: 2px solid #e3e5e6;
    padding: 0;
    font-size: 36px;
    color: #21b97a !important;
  }
  .close-btn {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 93px;
  }
}
span.filterRight {
  color: #21b97a !important;
}
</style>
